<template>
  <!-- 清算账户记账通知查询明细页面弹出框-->
  <el-dialog
    title="清算账户记账通知查询明细"
    center
    :visible.sync="open"
    width="1024px"
    :close-on-click-modal="true"
    @close="closeFn"
  >
    <el-form ref="detailsForm" :model="formData" label-width="160px" :disabled="true">
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易流水号：" prop="id">
              <el-input v-model="formData.id" placeholder="交易流水号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报文标识号：" prop="pkgId">
              <el-input v-model="formData.pkgId" placeholder="报文标识号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="系统编号：" prop="sysCode">
              <el-select v-model="formData.sysCode" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.SYSTEMCODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workdate">
              <el-date-picker
                v-model="formData.workdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发起参与机构号：" prop="indirectSender">
              <el-input v-model="formData.indirectSender" placeholder="发起参与机构号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发起参与机构名称：" prop="indirectSendername">
              <el-input v-model="formData.indirectSendername" placeholder="发起参与机构名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="接收参与机构号：" prop="indirectRecver">
              <el-input v-model="formData.indirectRecver" placeholder="接收参与机构号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收参与机构名称：" prop="indirectRecvername">
              <el-input v-model="formData.indirectRecvername" placeholder="接收参与机构名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="原报文标识号：" prop="oriPkgId">
              <el-input v-model="formData.oriPkgId" placeholder="原报文标识号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原报文类型：" prop="oriMsgType">
              <el-select v-model="formData.oriMsgType" placeholder="请选择" style="width: 100%">
                <el-option
                  :label="`${formData.oriMsgType}-${formData.oriMsgTypeDesc}`"
                  :value="formData.oriMsgType"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="原发起参与机构号：" prop="oriSender">
              <el-input v-model="formData.oriSender" placeholder="原发起参与机构号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原发起参与机构名称：" prop="oriSendername">
              <el-input v-model="formData.oriSendername" placeholder="原发起参与机构名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>NPC信息处理</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="NPC清算日期/终态日期：" prop="clrDate">
              <el-date-picker
                v-model="formData.clrDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="NPC处理状态：" prop="procStatus">
              <el-select v-model="formData.procStatus" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.PROCESSSTATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="NPC处理码：" prop="procCode">
              <el-select v-model="formData.procCode" placeholder="请选择" style="width: 100%">
                <el-option
                  :label="`${formData.procCode}-${formData.procCodeDesc}`"
                  :value="formData.procCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="NPC轧差场次：" prop="chkRound">
              <el-input v-model="formData.chkRound" placeholder="NPC轧差场次" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="NPC接收时间：" prop="npcRcvTime">
              <el-date-picker
                v-model="formData.npcRcvTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder="选择时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="NPC转发时间：" prop="npcTranTime">
              <el-date-picker
                v-model="formData.npcTranTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder="选择时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="NPC轧差日期：" prop="chkDate">
              <el-date-picker
                v-model="formData.chkDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="NPC拒绝信息：" prop="rejectInfo">
              <el-input type="textarea" v-model="formData.rejectInfo" placeholder="NPC拒绝信息" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>其他交易信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="业务类型：" prop="bizTypeCode">
              <el-select v-model="formData.bizTypeCode" placeholder="请选择" style="width: 100%">
                <el-option
                  :label="`${formData.bizTypeCode}-${formData.bizTypeCodeDesc}`"
                  :value="formData.bizTypeCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类：" prop="bizCtgyCode">
              <el-select v-model="formData.bizCtgyCode" placeholder="请选择" style="width: 100%">
                <el-option
                  :label="`${formData.bizCtgyCode}-${formData.bizCtgyCodeDesc}`"
                  :value="formData.bizCtgyCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="被记账行行号：" prop="entryBrno">
              <el-input v-model="formData.entryBrno" placeholder="被记账行行号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被记账行行名：" prop="entryBrname">
              <el-input v-model="formData.entryBrname" placeholder="被记账行行名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="借贷标识：" prop="cdFlag">
              <el-select v-model="formData.cdFlag" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.CREDITDEBITCODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="轧差场次：" prop="actChkRound">
              <el-input v-model="formData.actChkRound" placeholder="轧差场次" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="金额：" prop="amount">
              <el-input v-model="formData.amount" placeholder="金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前余额：" prop="balance">
              <el-input v-model="formData.balance" placeholder="当前余额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="零余额账户账号：" prop="zeroBalAcc">
              <el-input v-model="formData.zeroBalAcc" placeholder="零余额账户账号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="报文接收时间：" prop="rcvTime">
              <el-date-picker
                v-model="formData.rcvTime"
                type="datetime"
                value-format="yyyyMMddHHmmss"
                placeholder="选择时间"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通讯状态：" prop="status">
              <el-select v-model="formData.status" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.PKG_STATUS"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  name: "TallyDetails",
  components: {},
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
    };
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {
      this.resetForm("detailsForm");
      // this.$set(this, "form", {});
    },
    closeFn() {
      this.open = false;
    },
    show() {
      this.open = true;
    },
  },
};
</script>
